跳到主要内容

CSS 媒体查询

阐述

让我们可以在不同的媒体上使用不同的 CSS。

宽度查询

编写媒体查询的方式主要有两种:

  • 桌面端优先:先写桌面端样式,然后用媒体查询在较小的视窗上应用其他样式
  • 移动端优先:先写移动端样式,然后用媒体查询在较大的视窗上应用其他样式
    • 如果需要自己设计,最好用移动端优先的方式开发

不管使用哪种方式,都应该保持 min-widthmax-width 的一致性。

一般情况下,我们可以用 550 px, 1100 px, 1500 px 作为不同设备的断点。

交互查询

根据媒体能够交互的种类查询。

  • hover: 媒体是否能悬停
  • pointer: 媒体是否能指针

实例

.signup-button {
color: deeppink;
font-size: 1rem;
}

@media (max-width: 400px) {
.signup-button {
font-size: 2rem;
}
}

性质

相关内容

参考文献